import Vue from 'vue';
import { HtmlNode, HtmlNodeModel } from "@logicflow/core";

// 引入自定义节点vue文件
import BiaoNode from './BiaoNode.vue';

// 定义节点在画布中的大小，一般是在vue中写的多少，这里就写多少，主要是用于选中状态和计算设置桩位置（这里的桩就是连线所用的）
const width = 200;
const height = 80;

// 将自定义的demoNode.vue 文件通过 h函数引人使用
class ExcludeNodeView extends HtmlNode {
	constructor(props) {
		super(props);
		this.isMounted = false;
		this.vueItem = null;
	}

	setHtml(rootEl) {
		if (!this.isMounted) {
			const { properties, text: { value } } = this.props.model;
			const newModel = this.props.model;
			const newGraphModel = this.props.graphModel;
			
			const node = document.createElement('div');
			rootEl.appendChild(node);
			
			const Profile = Vue.extend({
				render (h) {
				
					/*
						* 重点
						* h方法是 LogicFlow 对外暴露的渲染函数，其用法与react、vue的createElement一致。
						* 格式：h(nodeName, attributes, [...children])
					*/
					return h(BiaoNode, {
						props: {
							/**
							* 可以携带一些这个节点的一些属性等数据，
							* 这样在 DemoNode.vue 中可以通过 props 接收到这些数据用于界面展示等相关逻辑处理
							*/
							title:properties.title,
							desc:properties.desc,
							// ....
						},
					});
				},
			});
			
			// 将节点挂载到vue对象上
			this.vueItem = new Profile();
			this.vueItem.$mount(node);
			this.isMounted = true;
		}
	}
}

class ExcludeNodeModel extends HtmlNodeModel {
  
  // 设置一些属性
  setAttributes() {
    // 设置宽高
    this.width = width;
    this.height = height;

    // 自定义节点禁用修改文本信息
    this.text.editable = false;
  }

}

// 暴露的节点对象
export default {
  type: 'BiaoNode',
  view: ExcludeNodeView,
  model: ExcludeNodeModel,
};
